<template>
  <div class="question-img">
    <input type="file" hidden ref="inputFile" @change="inputChange" />
    <img :src="img" alt="" class="imgchange" v-if="img" />
    <el-button v-else icon="el-icon-circle-close" class="uploadPic" @click="handleclickBtn">上传图片</el-button>
  </div>
</template>

<script>
export default {
  name: 'QuestionImg',

  data() {
    return {
      img: ''
    }
  },
  props: {
    index: {
      type: [Number, String, Object],
      required: true
    },
    questionForm: {
      type: [Object],
      required: true
    },
    paramsInput: {
      type: [Object],
      required: true
    }
  },
  watch: {
    questionForm(val) {
      // console.log(this.index);
      // console.log(this.questionForm.options[this.index - 1].img);
      // try {
      //   if (this.paramsInput.type === 1) {
      //     this.img = this.questionForm.options[this.index - 1].img;
      // var reader = new window.FileReader();
      // reader.readAsDataURL(imges);
      // reader.onloadend = function() {
      //   base64data = reader.result;
      //   console.log(base64data);
      // };
      //   }
      // } catch (error) {
      //   this.$message("图片路径找不到");
      // }
    }
  },
  methods: {
    handleclickBtn() {
      console.log(this.paramsInput, this.questionForm)
      this.$refs.inputFile.click()
    },
    inputChange() {
      // 获取文件对象
      var file = this.$refs.inputFile.files[0]
      console.log(file)
      this.img = window.URL.createObjectURL(file)
      // console.log(imges);
      // var reader = new FileReader();
      // reader.readAsDataURL(file);
      // reader.onloadend = () => {
      //   var base64data = reader.result;
      //   console.log(base64data);
      //   this.img = base64data;

      // };

      console.log(this.img)
      this.$emit('imgUrl', this.img)
      this.updataAvatarShow = true
      console.log(file)
      this.$refs.inputFile.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.uploadPic {
  height: 50px;
  border: 1px dashed;
  position: relative;
  /deep/ .el-icon-circle-close {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 23444;
  }
}
.imgchange {
  width: 103px;
  height: 50;
}
</style>
